
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinruhoutai"></use>
                    </svg>
                    <div class="name">进入后台</div>
                    <div class="fontclass">#icon-jinruhoutai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rizhi"></use>
                    </svg>
                    <div class="name">日志</div>
                    <div class="fontclass">#icon-rizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao3"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-tubiao3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-statistics"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="fontclass">#icon-statistics</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei1"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diaoyu"></use>
                    </svg>
                    <div class="name">钓鱼</div>
                    <div class="fontclass">#icon-diaoyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huancun"></use>
                    </svg>
                    <div class="name">缓存</div>
                    <div class="fontclass">#icon-huancun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban1"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-919292"></use>
                    </svg>
                    <div class="name">服务器</div>
                    <div class="fontclass">#icon-919292</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daohang"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-daohang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei2"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuju"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="fontclass">#icon-shuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mobanwendang"></use>
                    </svg>
                    <div class="name">模板文档</div>
                    <div class="fontclass">#icon-mobanwendang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontdengdai"></use>
                    </svg>
                    <div class="name">插件</div>
                    <div class="fontclass">#icon-iconfontdengdai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msnui-configration"></use>
                    </svg>
                    <div class="name">配置</div>
                    <div class="fontclass">#icon-msnui-configration</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-01"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimimaicon"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-xiugaimimaicon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-navigation-outline"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-navigation-outline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingchuyuhuancun"></use>
                    </svg>
                    <div class="name">清除与缓存</div>
                    <div class="fontclass">#icon-qingchuyuhuancun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei3"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanyu"></use>
                    </svg>
                    <div class="name">关于</div>
                    <div class="fontclass">#icon-guanyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyingye"></use>
                    </svg>
                    <div class="name">欢迎页</div>
                    <div class="fontclass">#icon-huanyingye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban2"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei4"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanwangicon31324"></use>
                    </svg>
                    <div class="name">运费模板</div>
                    <div class="fontclass">#icon-guanwangicon31324</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan1"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                    <div class="name">钩</div>
                    <div class="fontclass">#icon-gou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei5"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei6"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconnav2"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-iconnav2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei7"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daohang1"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-daohang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingchuhuancun"></use>
                    </svg>
                    <div class="name">清除缓存</div>
                    <div class="fontclass">#icon-qingchuhuancun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhihuanyingye"></use>
                    </svg>
                    <div class="name">设置-欢迎页</div>
                    <div class="fontclass">#icon-shezhihuanyingye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan2"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouz"></use>
                    </svg>
                    <div class="name">一键</div>
                    <div class="fontclass">#icon-shouz</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zixun"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="fontclass">#icon-zixun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei8"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitongguanli"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="fontclass">#icon-xitongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimima"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-xiugaimima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zixun1"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="fontclass">#icon-zixun1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuidiao"></use>
                    </svg>
                    <div class="name">垂钓</div>
                    <div class="fontclass">#icon-chuidiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitonghuancun"></use>
                    </svg>
                    <div class="name">系统缓存</div>
                    <div class="fontclass">#icon-xitonghuancun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-server"></use>
                    </svg>
                    <div class="name">服务器</div>
                    <div class="fontclass">#icon-server</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caidancai"></use>
                    </svg>
                    <div class="name">菜单－菜</div>
                    <div class="fontclass">#icon-caidancai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zixun2"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="fontclass">#icon-zixun2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zixun3"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="fontclass">#icon-zixun3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimima1"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-xiugaimima1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daohang2"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-daohang2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyingye1"></use>
                    </svg>
                    <div class="name">欢迎页</div>
                    <div class="fontclass">#icon-huanyingye1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huancun1"></use>
                    </svg>
                    <div class="name">缓存</div>
                    <div class="fontclass">#icon-huancun1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitongguanli1"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="fontclass">#icon-xitongguanli1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimima2"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-xiugaimima2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian1"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rizhi1"></use>
                    </svg>
                    <div class="name">日志</div>
                    <div class="fontclass">#icon-rizhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenzu"></use>
                    </svg>
                    <div class="name">分组</div>
                    <div class="fontclass">#icon-fenzu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian2"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ziliao"></use>
                    </svg>
                    <div class="name">我的资料</div>
                    <div class="fontclass">#icon-ziliao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-news-copy"></use>
                    </svg>
                    <div class="name">资讯</div>
                    <div class="fontclass">#icon-news-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rizhi2"></use>
                    </svg>
                    <div class="name">日志</div>
                    <div class="fontclass">#icon-rizhi2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimima3"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-xiugaimima3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-houtaiguanli"></use>
                    </svg>
                    <div class="name">后台管理</div>
                    <div class="fontclass">#icon-houtaiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mysqlshujuku"></use>
                    </svg>
                    <div class="name">mysql数据库</div>
                    <div class="fontclass">#icon-mysqlshujuku</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimima4"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-xiugaimima4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingchuhuancun1"></use>
                    </svg>
                    <div class="name">清楚缓存</div>
                    <div class="fontclass">#icon-qingchuhuancun1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan3"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chajian"></use>
                    </svg>
                    <div class="name">插件</div>
                    <div class="fontclass">#icon-chajian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimima5"></use>
                    </svg>
                    <div class="name">修改密码</div>
                    <div class="fontclass">#icon-xiugaimima5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontanquan"></use>
                    </svg>
                    <div class="name">授权</div>
                    <div class="fontclass">#icon-iconfontanquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon03"></use>
                    </svg>
                    <div class="name">路由</div>
                    <div class="fontclass">#icon-icon03</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html1"></use>
                    </svg>
                    <div class="name">HTML</div>
                    <div class="fontclass">#icon-html1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huancun2"></use>
                    </svg>
                    <div class="name">缓存</div>
                    <div class="fontclass">#icon-huancun2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-permission"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-permission</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-database"></use>
                    </svg>
                    <div class="name">数据库</div>
                    <div class="fontclass">#icon-database</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-q"></use>
                    </svg>
                    <div class="name">Q</div>
                    <div class="fontclass">#icon-q</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon12"></use>
                    </svg>
                    <div class="name">菜单，电视菜单</div>
                    <div class="fontclass">#icon-icon12</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moxing"></use>
                    </svg>
                    <div class="name">模型</div>
                    <div class="fontclass">#icon-moxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-luyou"></use>
                    </svg>
                    <div class="name">路由</div>
                    <div class="fontclass">#icon-luyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shujushujukusql"></use>
                    </svg>
                    <div class="name">数据-数据库-SQL</div>
                    <div class="fontclass">#icon-shujushujukusql</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong1"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong2"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouquanicon"></use>
                    </svg>
                    <div class="name">授权icon</div>
                    <div class="fontclass">#icon-shouquanicon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan4"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yijiantuiguang"></use>
                    </svg>
                    <div class="name">一键推广</div>
                    <div class="fontclass">#icon-yijiantuiguang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitongguanli2"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="fontclass">#icon-xitongguanli2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconset0265"></use>
                    </svg>
                    <div class="name">wifi路由</div>
                    <div class="fontclass">#icon-iconset0265</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gou1"></use>
                    </svg>
                    <div class="name">钩</div>
                    <div class="fontclass">#icon-gou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan5"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan6"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouquan"></use>
                    </svg>
                    <div class="name">授权</div>
                    <div class="fontclass">#icon-shouquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html-copy"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-luyou1"></use>
                    </svg>
                    <div class="name">路由</div>
                    <div class="fontclass">#icon-luyou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiedian"></use>
                    </svg>
                    <div class="name">节点</div>
                    <div class="fontclass">#icon-jiedian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouquan1"></use>
                    </svg>
                    <div class="name">授权</div>
                    <div class="fontclass">#icon-shouquan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan7"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibiaoti13"></use>
                    </svg>
                    <div class="name">模型管理</div>
                    <div class="fontclass">#icon-weibiaoti13</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong3"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan8"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodeziliao"></use>
                    </svg>
                    <div class="name">我的资料</div>
                    <div class="fontclass">#icon-wodeziliao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong4"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-0"></use>
                    </svg>
                    <div class="name">导航</div>
                    <div class="fontclass">#icon-0</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-trunknood"></use>
                    </svg>
                    <div class="name">总线节点</div>
                    <div class="fontclass">#icon-trunknood</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong5"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingchuhuancun2"></use>
                    </svg>
                    <div class="name">清除缓存</div>
                    <div class="fontclass">#icon-qingchuhuancun2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cache-16"></use>
                    </svg>
                    <div class="name">缓存服务</div>
                    <div class="fontclass">#icon-cache-16</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenzu1"></use>
                    </svg>
                    <div class="name">分组</div>
                    <div class="fontclass">#icon-fenzu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirongguanli"></use>
                    </svg>
                    <div class="name">内容管理</div>
                    <div class="fontclass">#icon-neirongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiedian1"></use>
                    </svg>
                    <div class="name">节点</div>
                    <div class="fontclass">#icon-jiedian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenzu-copy"></use>
                    </svg>
                    <div class="name">分组</div>
                    <div class="fontclass">#icon-fenzu-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuwuqiguanli"></use>
                    </svg>
                    <div class="name">服务器管理</div>
                    <div class="fontclass">#icon-fuwuqiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanlichajian"></use>
                    </svg>
                    <div class="name">管理插件</div>
                    <div class="fontclass">#icon-guanlichajian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rizhi3"></use>
                    </svg>
                    <div class="name">日志</div>
                    <div class="fontclass">#icon-rizhi3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian-copy-copy"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian-copy-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodeziliao1"></use>
                    </svg>
                    <div class="name">我的资料</div>
                    <div class="fontclass">#icon-wodeziliao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html2"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yunduanfuwu"></use>
                    </svg>
                    <div class="name">云端服务</div>
                    <div class="fontclass">#icon-yunduanfuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moxingguanli"></use>
                    </svg>
                    <div class="name">模型管理</div>
                    <div class="fontclass">#icon-moxingguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html5"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-privilege"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-privilege</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenzu2"></use>
                    </svg>
                    <div class="name">分组</div>
                    <div class="fontclass">#icon-fenzu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingchuhuancun3"></use>
                    </svg>
                    <div class="name">清除缓存</div>
                    <div class="fontclass">#icon-qingchuhuancun3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-q1"></use>
                    </svg>
                    <div class="name">Q</div>
                    <div class="fontclass">#icon-q1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong6"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangzhanpeizhiguanli"></use>
                    </svg>
                    <div class="name">网站配置管理</div>
                    <div class="fontclass">#icon-wangzhanpeizhiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi"></use>
                    </svg>
                    <div class="name">配置</div>
                    <div class="fontclass">#icon-peizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-houtaizhuye02"></use>
                    </svg>
                    <div class="name">后台主页02</div>
                    <div class="fontclass">#icon-houtaizhuye02</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong7"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan9"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wsmp-payuser"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-wsmp-payuser</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duigou"></use>
                    </svg>
                    <div class="name">对钩</div>
                    <div class="fontclass">#icon-duigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gou2"></use>
                    </svg>
                    <div class="name">钩</div>
                    <div class="fontclass">#icon-gou2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-houtaiappsdknew"></use>
                    </svg>
                    <div class="name">后台_appsdknew</div>
                    <div class="fontclass">#icon-houtaiappsdknew</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong8"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yunduanfuwu1"></use>
                    </svg>
                    <div class="name">云端服务</div>
                    <div class="fontclass">#icon-yunduanfuwu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi1"></use>
                    </svg>
                    <div class="name">配置</div>
                    <div class="fontclass">#icon-peizhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian3"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyingjiatingruzhu"></use>
                    </svg>
                    <div class="name">欢迎家庭入住</div>
                    <div class="fontclass">#icon-huanyingjiatingruzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirong9"></use>
                    </svg>
                    <div class="name">内容</div>
                    <div class="fontclass">#icon-neirong9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-luyou2"></use>
                    </svg>
                    <div class="name">路由</div>
                    <div class="fontclass">#icon-luyou2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodeziliao2"></use>
                    </svg>
                    <div class="name">我的资料</div>
                    <div class="fontclass">#icon-wodeziliao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html3"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi2"></use>
                    </svg>
                    <div class="name">配置</div>
                    <div class="fontclass">#icon-peizhi2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-q2"></use>
                    </svg>
                    <div class="name">Q</div>
                    <div class="fontclass">#icon-q2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-webserve"></use>
                    </svg>
                    <div class="name">服务器管理</div>
                    <div class="fontclass">#icon-webserve</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanlichajian1"></use>
                    </svg>
                    <div class="name">管理插件</div>
                    <div class="fontclass">#icon-guanlichajian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-html-copy1"></use>
                    </svg>
                    <div class="name">html</div>
                    <div class="fontclass">#icon-html-copy1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-extend"></use>
                    </svg>
                    <div class="name">扩展</div>
                    <div class="fontclass">#icon-extend</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan10"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neirongguanli1"></use>
                    </svg>
                    <div class="name">内容管理</div>
                    <div class="fontclass">#icon-neirongguanli1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodechajian"></use>
                    </svg>
                    <div class="name">我的插件</div>
                    <div class="fontclass">#icon-wodechajian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanyinglipin"></use>
                    </svg>
                    <div class="name">欢迎礼品</div>
                    <div class="fontclass">#icon-huanyinglipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiedianleijiedian"></use>
                    </svg>
                    <div class="name">节点类_节点</div>
                    <div class="fontclass">#icon-jiedianleijiedian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-houtaishouye"></use>
                    </svg>
                    <div class="name">后台-首页</div>
                    <div class="fontclass">#icon-houtaishouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-2neirongguanli"></use>
                    </svg>
                    <div class="name">2 内容管理</div>
                    <div class="fontclass">#icon-2neirongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diamond"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-diamond</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caidan"></use>
                    </svg>
                    <div class="name">前台菜单</div>
                    <div class="fontclass">#icon-caidan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moxingcanshuguanli"></use>
                    </svg>
                    <div class="name">模型参数管理</div>
                    <div class="fontclass">#icon-moxingcanshuguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan11"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duigou1"></use>
                    </svg>
                    <div class="name">对钩</div>
                    <div class="fontclass">#icon-duigou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-HTML"></use>
                    </svg>
                    <div class="name">HTML</div>
                    <div class="fontclass">#icon-HTML</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-houtai-shouye"></use>
                    </svg>
                    <div class="name">后台-首页</div>
                    <div class="fontclass">#icon-houtai-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Q"></use>
                    </svg>
                    <div class="name">Q</div>
                    <div class="fontclass">#icon-Q</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouquan2"></use>
                    </svg>
                    <div class="name">授权</div>
                    <div class="fontclass">#icon-shouquan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-houtai-shouye1"></use>
                    </svg>
                    <div class="name">后台-首页</div>
                    <div class="fontclass">#icon-houtai-shouye1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian4"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Grouping"></use>
                    </svg>
                    <div class="name">分组</div>
                    <div class="fontclass">#icon-Grouping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caidan1"></use>
                    </svg>
                    <div class="name">菜单，电视菜单</div>
                    <div class="fontclass">#icon-caidan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan12"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan12</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
